<template>
  <a-config-provider
    :locale="getLocale"
    :theme="{
      token: {
        colorPrimary: themeColors[colorIndex].primaryColor,
        colorLink: themeColors[colorIndex].primaryColor,
        colorLinkActive: themeColors[colorIndex].activeColor,
        colorLinkHover: themeColors[colorIndex].hoverColor,
        colorIcon: themeColors[colorIndex].primaryColor
      },
      components: {
        Button: {
          colorLink: themeColors[colorIndex].primaryColor,
          colorLinkActive: themeColors[colorIndex].activeColor,
          colorLinkHover: themeColors[colorIndex].hoverColor
        },
        Icon: {
          colorIcon: themeColors[colorIndex].primaryColor
        }
      }
    }"
  >
    <router-view />
  </a-config-provider>
</template>
<script setup>
import { useStore } from 'vuex'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import enUS from 'ant-design-vue/es/locale/en_US'
import { themeColors } from '@/theme/color'
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const locales = {
  zh_cn: zhCN,
  en_us: enUS
}
const store = useStore()
const { locale } = useI18n()
const handleSetLanguage = (lang) => {
  locale.value = lang
}
// 切换语言/设置本地和antd的语言包
const getLocale = computed(() => {
  handleSetLanguage(store.getters.appConfig.language)
  return locales[store.getters.appConfig.language]
})

// 切换主题
const colorIndex = computed(() => {
  return themeColors.findIndex((item) => {
    return item.primaryColor === store.getters.mainColor
  })
})
</script>
<style lang="scss">
#app {
  height: 100vh;
  overflow: hidden;
}
</style>
